<template>
  <div class="view">
    <el-menu
      mode="horizontal"
      background-color="#2C2D3A"
      text-color="#fff"
      active-text-color="#fff"
    >
      <el-submenu index="1" :popper-append-to-body="false">
        <template slot="title">File</template>
        <el-menu-item index="1-1">Open</el-menu-item>
        <el-submenu index="1-2">
          <template slot="title">Open Recent...</template>
          <el-menu-item index="1-2-1">Object1</el-menu-item>
          <el-menu-item index="1-2-2">Object2</el-menu-item>
          <el-menu-item index="1-2-3">Object3</el-menu-item>
        </el-submenu>
        <el-menu-item index="1-3">Save</el-menu-item>
        <el-menu-item index="1-4">Close all</el-menu-item>
      </el-submenu>
      <el-submenu index="2" :popper-append-to-body="false">
        <template slot="title">Display</template>
        <el-menu-item index="2-1">Full screen</el-menu-item>
        <el-menu-item index="2-2">Full screen(3D view)</el-menu-item>
        <el-menu-item index="2-3">Toggle Centered Perspective</el-menu-item>
        <el-menu-item index="2-4">Toggle Viewer Based Perspective</el-menu-item>
        <el-submenu
          index="2-5"
          style="border-top:1px solid #3B3C4E;border-bottom:1px solid #3B3C4E"
        >
          <template slot="title">Toolbars</template>
          <el-menu-item index="2-5-1">Object1</el-menu-item>
          <el-menu-item index="2-5-2">Object2</el-menu-item>
          <el-menu-item index="2-5-3">Object3</el-menu-item>
        </el-submenu>
        <el-submenu index="2-6">
          <template slot="title">Colors</template>
          <el-menu-item index="2-6-1" @click="changeColors('2')">RGB point cloud fusion</el-menu-item>
          <el-menu-item index="2-6-2" @click="changeColors('1')">Convert Coordinate(s) to SF(s)</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="3" :popper-append-to-body="false">
        <template slot="title">3D Views</template>
        <el-menu-item index="3-1">New</el-menu-item>
        <el-menu-item index="3-2">Zoom in</el-menu-item>
        <el-menu-item index="3-3">Zoom out</el-menu-item>
        <el-menu-item index="3-4">Close</el-menu-item>
        <el-menu-item index="3-5" style="border-bottom:1px solid #3B3C4E">Close all</el-menu-item>
        <el-menu-item index="3-6" class="view">3D View1</el-menu-item>
        <el-menu-item index="3-7">3D View2</el-menu-item>
      </el-submenu>
    </el-menu>
    <div class="toolbars flex">
      <div class="img" v-for="(item, index) in toolbarList" :key="index">
        <img :src="item.imgUrl" @click="changeToolbar(index)" />
      </div>
    </div>
    <div class="content flex">
      <div class="model-tree">
        <h1>Model Tree</h1>
        <el-tree
          show-checkbox
          :data="treeData"
          default-expand-all
          node-key="id"
          :default-checked-keys="checkedKey"
        ></el-tree>
      </div>
      <div class="model-view">
        <video width="100%" height="100%" v-show="!currentIndex" autoplay="autoplay">
          <source src="@/assets/video/6.mp4" />
        </video>
        <!-- <img src="@/assets/init.png" v-show="!currentIndex" /> -->
        <img src="@/assets/left_view.png" v-show="currentIndex === 2" />
        <img src="@/assets/bottom_view.png" v-show="currentIndex === 3" />
        <img src="@/assets/back_view.png" v-show="currentIndex === 4" />
        <img src="@/assets/top_view.png" v-show="currentIndex === 5" />
        <img src="@/assets/front_view.png" v-show="currentIndex === 6" />
        <img src="@/assets/right_view.png" v-show="currentIndex === 7" />
        <img src="@/assets/zoom in.png" v-show="currentIndex === 8" />
        <img src="@/assets/zoom out.png" v-show="currentIndex === 9" />
        <img src="@/assets/convert_view.png" v-show="currentIndex === 10" />
      </div>
      <el-scrollbar>
        <div class="property">
          <h1>Property</h1>
          <div class="info">
            <div class="line">
              <span>Property</span>
              <span>State/Value</span>
            </div>
            <div class="line">
              <p>CC Object</p>
            </div>
            <div class="line">
              <span>Name</span>
              <span>cueF_demo-Cloud</span>
            </div>
            <div class="line">
              <span>Visible</span>
              <el-checkbox v-model="visible"></el-checkbox>
            </div>
            <div class="line">
              <span>Show 3D name(in 3D)</span>
              <el-checkbox></el-checkbox>
            </div>
            <div class="line flex middle">
              <span>Colors</span>
              <el-select v-model="selectedColor" size="mini" style="width: 150px;">
                <el-option value="0" label="None"></el-option>
                <el-option value="1" label="Scalar field"></el-option>
                <el-option value="2" label="RGB"></el-option>
              </el-select>
            </div>
            <div class="line flex middle">
              <span>Box dimensions</span>
              <div class="flex column dimensions">
                <span>X：16.3983</span>
                <span>Y：40.5555</span>
                <span>Z：2.739</span>
              </div>
            </div>
            <div class="line flex middle">
              <span>Shifted box center</span>
              <div class="flex column dimensions">
                <span>X：-3.513</span>
                <span>Y：19.059</span>
                <span>Z：-0.0655</span>
              </div>
            </div>
            <div class="line flex middle">
              <span>Global box center</span>
              <div class="flex column dimensions">
                <span>X：-3.513004</span>
                <span>Y：19.059565</span>
                <span>Z：-0.065500</span>
              </div>
            </div>
            <div class="line">
              <span>Info</span>
              <span>Object ID:262-Children:1</span>
            </div>
            <div class="line flex middle">
              <span>Current Display</span>
              <el-select size="mini" v-model="selectedDisplay" style="width: 150px;">
                <el-option value="0" label="3D View 1"></el-option>
                <el-option value="1" label="3D View 2"></el-option>
              </el-select>
            </div>
            <div class="line">
              <p>Cloud</p>
            </div>
            <div class="line">
              <span>Points</span>
              <span>21,622,000</span>
            </div>
            <div class="line">
              <span>Global shift</span>
              <span>(0.00;0.00;0.00)</span>
            </div>
            <div class="line">
              <span>Global scale</span>
              <span>1.000000</span>
            </div>
            <div class="line flex middle">
              <span>Point size</span>
              <el-select size="mini" v-model="selectedPointSize" style="width: 150px;">
                <el-option value="0" label="Default"></el-option>
                <el-option value="1" label="Large"></el-option>
                <el-option value="2" label="Medium"></el-option>
              </el-select>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: '3-6',
      currentIndex: '',
      visible: true,
      checkedKey: [1],
      treeData: [
        {
          id: 0,
          label: 'cueF_demo_ply(D:/POC项目/点云数据)',
          children: [
            {
              id: 1,
              label: 'cueF_demo-Cloud'
            }
          ]
        }
      ],
      toolbarList: [
        {
          imgUrl: require('@/assets/file_folder.png')
        },
        {
          imgUrl: require('@/assets/save.png')
        },
        {
          imgUrl: require('@/assets/left.png')
        },
        {
          imgUrl: require('@/assets/bottom.png')
        },
        {
          imgUrl: require('@/assets/front.png')
        },
        {
          imgUrl: require('@/assets/top.png')
        },
        {
          imgUrl: require('@/assets/back.png')
        },
        {
          imgUrl: require('@/assets/right.png')
        },
        {
          imgUrl: require('@/assets/zoomin.png')
        },
        {
          imgUrl: require('@/assets/zoomout.png')
        }
      ],
      selectedColor: '2',
      selectedDisplay: '0',
      selectedPointSize: '0'
    }
  },
  methods: {
    changeToolbar(index) {
      this.currentIndex = index
    },
    changeColors(index) {
      this.selectedColor = index
      if (index === '1') {
        this.currentIndex = 10
      }
    }
  }
}
</script>
<style lang="scss" scoped>
body {
  .el-menu--horizontal .el-menu .view,
  .el-menu--horizontal .el-menu .view > .el-submenu__title {
    position: relative;
    &::before {
      position: absolute;
      left: 5px;
      top: 14px;
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #fff;
    }
  }
  .el-menu--horizontal .el-menu .el-menu-item,
  .el-menu--horizontal .el-menu .el-submenu__title {
    padding: 0 20px;
  }
}
.view {
  .el-menu {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    // > li {
    //   &:hover {
    //     .el-submenu__title {
    //       color: #0f0 !important;
    //     }
    //   }
    // }
  }
  .toolbars {
    background: #2c2d3a;
    padding: 0 10px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid #000;
    .img {
      padding: 10px;
      cursor: pointer;
      &:hover {
        background: #288eff;
      }
    }
  }
  .content {
    height: calc(100vh - 191px);
  }
  .model-tree,
  .property {
    width: 16%;
    background: #23242f;
    color: #fff;
    h1 {
      background: #2c2d3a;
      font-weight: normal;
      font-size: 20px;
      margin: 0;
      padding: 10px 20px;
      box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    }
    .el-tree {
      background: transparent;
      color: #fff;
    }
  }
  .model-view {
    width: 64%;
    background: #000;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .el-scrollbar {
    width: 20%;
    background: #23242f;
  }
  .property {
    width: 100%;
    font-size: 12px;
    .line {
      padding: 5px 0;
      margin: 5px 0;
      > span {
        white-space: nowrap;
        width: 50%;
        display: inline-block;
        box-sizing: border-box;
        &:first-child {
          padding-left: 10px;
        }
      }
      p {
        margin: 0;
        padding: 5px 10px;
        background: #3b3c4e;
      }
      .dimensions {
        span {
          &:nth-child(2) {
            margin: 5px 0;
          }
        }
      }
    }
  }
}
</style>
